<div class="card pt-4 pb-4">
  <div
    class="flex flex-wrap align-items-center justify-content-center card-container"
  >
    <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
      <p-panel header="Вход">
        <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
          <div class="ui-grid-row">
            <div class="ui-grid-col-2 font-bold">Email*</div>
            <div class="ui-grid-col-6">
              <input
                pInputText
                type="text"
                class="form-control"
                name="login"
                class="p-inputtext-lg"
                style="width: 300px; height: 50px"
                ngModel
                #login="ngModel"
                required
                minlength="4"
                pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*"
              />
            </div>
            <div class="ui-grid-col-4 pt-3">
              <div style="color: red">
                <p>
                  <strong *ngIf="login?.errors?.['required'] && login.dirty"
                    >Требуется логин!</strong
                  >
                </p>
                <p>
                  <strong *ngIf="login?.errors?.['minlength']"
                    >Логин д.б. больше 4 символов!</strong
                  >
                </p>
                <p>
                  <strong *ngIf="login?.errors?.['pattern']"
                    >Нужно вводить email!</strong
                  >
                </p>
              </div>
            </div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-grid-col-2 pt-3 font-bold">Пароль*</div>
            <div class="ui-grid-col-6">
              <input
                pInputText
                type="password"
                class="form-control"
                name="password"
                class="p-inputtext-lg"
                style="width: 300px; height: 50px"
                ngModel
                #password="ngModel"
                required
                minlength="4"
              />
            </div>
            <div class="ui-grid-col-4 pt-3">
              <div style="color: red">
                <p>
                  <strong
                    *ngIf="password?.errors?.['required'] && password.dirty"
                    >Требуется пароль!</strong
                  >
                </p>
                <p>
                  <strong *ngIf="password?.errors?.['minlength']"
                    >Пароль д.б. больше 4 символов!</strong
                  >
                </p>
              </div>
            </div>
          </div>
          <div class="flex-1 flex align-items-center justify-content-end pt-4">
            <button pButton type="submit" [disabled]="myForm.invalid">
              Войти
            </button>
          </div>
        </div>
      </p-panel>
    </form>
  </div>
</div>
